
<template>
  <div class="app-container">
    <div id="weather">
      <div class="bannername">
        天气情况
      </div>
      <iframe
        id="fancybox-frame"
        name="fancybox-frame1584602660478"
        width="100%"
        frameborder="0"
        scrolling="no"
        hspace="0"
        src="http://i.tianqi.com/index.php?c=code&a=getcode&id=25&h=100&w=155"
      />
      <iframe
        width="500"
        scrolling="no"
        frameborder="0"
        allowtransparency="true"
        src="//i.tianqi.com/index.php?c=code&id=12&icon=5&py=huangdao&num=3&site=14"
      />

    </div>
    <div id="nodisaster">
      <div class="bannername">
        无灾害事件
      </div>
      <div>
        <h2 style="color:lightseagreen">安全第一 预防为主</h2>
        <div style="background-color:silver">
          <div style="float:left"><h1>目标</h1></div>
          <div><h2>长期：{{ longdate }}天</h2></div>
          <div><h2>短期：{{ shortdate }}天</h2></div>
          <h2 style="color:lightseagreen">无事故时间： {{ safedays }}天({{ safetime }}小时)</h2>
          <h3 style="color:lightseagreen">6个月达到日：{{ arrivedate }}</h3>
          <h3 style="color:lightseagreen">无事故开始时间：{{ startdate }}</h3>
        </div>
      </div>
    </div>
    <div>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="bannername">
            未遂事故年度柱状图
          </div>
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="bannername">
            STOP卡年度柱状图
          </div>
          <div class="chart-wrapper">
            <bar-chart1 />
          </div>
        </el-col>

      </el-row>
    </div>
    <div>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="bannername">
            STOP卡奖励人员名单
          </div>
          <div class="chart-wrapper">
            <bar-chart2 />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="bannername">
            未遂事故奖励人员名单
          </div>
          <div class="chart-wrapper">
            <bar-chart3 />
          </div>
        </el-col>

      </el-row>
    </div>
    <!-- <div id="viewfault">
      <div class="bannername">
        未遂事故年度柱状图
      </div>
    </div>
    <div id="viewstop">
      <div class="bannername">
        STOP卡年度柱状图
      </div>
    </div>
    <div id="faultlist">
      <div class="bannername">
        未遂事故最新数据
      </div>
    </div>
    <div id="stoplist">
      <div class="bannername">
        STOP卡最新数据
      </div>
    </div> -->
  </div>

</template>
<script>

import BarChart from './components/BarChart'
import BarChart1 from './components/BarChart1'
import BarChart2 from './components/BarChart2'
import BarChart3 from './components/BarChart3'
import waves from '@/directive/waves'
import { getData } from '@/api/baseHours'
export default {
  name: 'TrainConst',
  directives: { waves },
  components: {

    BarChart,
    BarChart1,
    BarChart2,
    BarChart3
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      editList: null,
      sortable: null,
      oldList: [],
      newList: [],
      longdate: null,
      shortdate: null,
      safedays: null,
      safetime: null,
      arrivedate: null,
      startdate: null,

      // 参数条件
      listQuery: {
        pageQ: 1,
        limit: 20
      },
      temp: {
        id: undefined,
        sdate: new Date(),
        edate: new Date()
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        create: '创建'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'sdate', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    // 获取长期目标、短期目标、无事故时间天数、无事故时间小时数、6个月到达日、无事故开始时间
    this.fechData()
  },
  methods: {
    fechData() {
      getData().then(response => {
        this.safedays = response.betweenDate
        this.safetime = response.betweenDateTime
        this.longdate = response.longdate
        this.shortdate = response.shortdate
        this.arrivedate = response.arrivedate
        this.startdate = response.begindate
      })
    },

    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleFilter() {
      this.listQuery.pageQ = 1
      this.fechData()
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
.bannername{

  background-color:lightblue;
}
#weather {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
#nodisaster {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
#viewfault {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
#viewstop {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
#faultlist {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
#stoplist {
    float:left;
    width: 50%;
    height: 300px;
    border-style:groove;
    border-color:#fff;
}
</style>
